import { Flex, Typography } from "antd";
import { getOrderIcon } from "../Common/commonData";
import styles from "./DCDiCard.module.css";
import { useUser } from "@/hook/useUser/useUser";

const { Title } = Typography;

export function DCDiCard({ item = {}, style = {} }) {
  const { openInNewWindow } = useUser();
  const target = openInNewWindow ? "_blank" : "_self";
  return (
    <a
      href={item.url}
      target={target}
      className={styles["title-link"]}
      style={{ textDecoration: "none" }}>
      <Flex
        style={{
          backgroundColor: "white",
          borderRadius: 8,
          boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
          padding: 16,
          transition: "all 0.3s ease",
          "&:hover": {
            boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
            transform: "translateY(-2px)",
          },
          ...style,
        }}
        gap={16}
        align="flex-start">
        {/* 左侧序号 */}
        <Flex
          justify="center"
          align="center"
          style={{
            width: 24,
            height: 24,
            backgroundColor: "#f0f2f5",
            borderRadius: 4,
            color: "#666",
            fontWeight: "bold",
            flexShrink: 0,
          }}>
          {getOrderIcon(item.order)}
        </Flex>

        {/* 标题和热度 */}
        <Flex justify="space-between" align="flex-start">
          <Title
            level={5}
            className={styles.title}
            style={{
              margin: 0,
              color: "#222",
            }}>
            {item.title}
          </Title>
        </Flex>
      </Flex>
    </a>
  );
}
